{% block sw_media_breadcrumbs %}
<nav
    class="sw-media-breadcrumbs"
    :class="swMediaBreadcrumbsClasses"
>
    {% block sw_media_breadcrumbs_root_folder %}
    <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
    <a
        class="sw-media-breadcrumbs__button-back-to-root"
        role="button"
        tabindex="0"
        @click="onBreadcrumbsItemClicked(null)"
        @keydown.enter="onBreadcrumbsItemClicked(null)"
    >
        <img
            v-if="!small"
            :src="assetFilter('/administration/administration/static/img/media/multicolor-folder-breadcrumbs-back-to-root.svg')"
            alt="Folder breadcrumbs back-to-root"
        >
        <img
            v-else
            :src="assetFilter('/administration/administration/static/img/media/multicolor-folder-breadcrumbs.svg')"
            alt="Folder breadcrumbs"
        >
    </a>
    {% endblock %}

    {% block sw_media_breadcrumbs_parent_folder %}
    <a
        v-if="parentFolder"
        class="sw-media-breadcrumbs__entry sw-media-breadcrumbs__parent-folder"
        role="button"
        tabindex="0"
        @click="onBreadcrumbsItemClicked(parentFolder.id)"
        @keydown.enter="onBreadcrumbsItemClicked(parentFolder.id)"
    >
        <mt-icon
            class="sw-media-breadcrumbs__arrow-separator"
            name="regular-chevron-right-xxs"
        />
        {{ parentFolder.name }}
    </a>
    {% endblock %}

    {% block sw_media_breadcrumbs_current_folder %}
    <span
        v-if="currentFolder"
        class="sw-media-breadcrumbs__entry sw-media-breadcrumbs__current-folder"
    >
        <mt-icon
            class="sw-media-breadcrumbs__arrow-separator"
            name="regular-chevron-right-xxs"
        />
        {{ currentFolder.name }}
    </span>
    {% endblock %}
</nav>
{% endblock %}
